<template>
  <div class="date-picker--container" :class="'date-picker--' + colorStyle">
    <slot name="prepend" />
    <div class="date-picker--range-begin">
      <slot name="begin" />
    </div>
    <div class="date-picker--range-separator"></div>
    <div class="date-picker--range-end">
      <slot name="end" />
    </div>
    <slot name="append" />
  </div>
</template>

<script>
export default {
  name: "RangeLayout",
  props: {
    showClear: Boolean,
    // 风格样式
    colorStyle: {
      type: String,
      validate(v) {
        return ["dark", "light"].indexOf(v) > -1;
      },
      default: "light",
    },
  },
};
</script>
